<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="选择">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="选择">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border fit>
      <el-table-column align="center" label='编号'>
        <template slot-scope="scope">{{scope.$index+1}}</template>
      </el-table-column>
      <el-table-column align="center" label="名称" prop="name"></el-table-column>
      <el-table-column align="center" label='地址' prop="address"></el-table-column>
      <el-table-column align="center" label="所属产品" prop="orz_name">
        <template slot-scope="scope">{{scope.row.orz_name}}-{{scope.row.brand_name}}</template>
      </el-table-column>
      <el-table-column align="center" label='经纬度'>
        <template slot-scope="scope">{{scope.row.longitude}}/{{scope.row.latitude}}</template>
      </el-table-column>
      <el-table-column align="center" label="区域管理">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label='机台列表'>
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from "@/api/information/store";

export default {
  data() {
    return {
      list: null,
      listLoading: false,
      formInline: {
        user: "",
        region: ""
      }
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleClick(id) {
      console.log(id);
    },
    fetchData() {
      this.listLoading = true;
      getList(this.listQuery).then(response => {
        this.list = response;
        //console.log(response);
        this.listLoading = false;
      }).catch(res=>{
        this.listLoading=false;
      });
    }
  }
};
</script>
